<script setup>
import { ref } from 'vue';

// import { onMounted } from 'vue';

// onMounted(() => {
// 	// 获取查询对象，后续通过它去检索元素
// 	const query = uni.createSelectorQuery();

// 	// 执行检索的方法,单个元素
// 	query.select('.box').boundingClientRect((res) => {
// 		console.log(res);
// 	});
// 	// 多个元素位置尺寸信息
// 	query.selectAll('.box').boundingClientRect((resList) => {
// 		console.log(resList);
// 	});
// 	// 设备的屏幕尺寸信息
// 	query.selectViewport().boundingClientRect((res) => {
// 		console.log(res);
// 	});
// 执行查询exec（不执行这个，查询不了结果）
// 	query.exec();
// });
const isShow = ref(false);
const getOffset = () => {
	// 1.选择器对象
	const query = uni.createSelectorQuery();
	// 2.获取信息
	// ViewPort 结合scrollOffset即可获取
	query.selectViewport().scrollOffset((res) => {
		console.log(res);
		if (res.scrollTop > 600) {
			isShow.value = true;
		} else {
			isShow.value = false;
		}
	});
	// 3.执行查询
	query.exec();
};
</script>

<template>
	<view v-if="isShow" class="to-top">返回顶部</view>
	<view class="container" @click="getOffset">
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate illo voluptatum at numquam architecto inventore exercitationem rerum repellendus iure nemo! Similique
		ratione voluptatem quisquam culpa facere quo voluptate placeat sint! Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate illo voluptatum at numquam
		architecto inventore exercitationem rerum repellendus iure nemo! Similique ratione voluptatem quisquam culpa facere quo voluptate placeat sint! Lorem ipsum dolor sit amet
		consectetur adipisicing elit. Voluptate illo voluptatum at numquam architecto inventore exercitationem rerum repellendus iure nemo! Similique ratione voluptatem quisquam
		culpa facere quo voluptate placeat sint! Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate illo voluptatum at numquam architecto inventore exercitationem
		rerum repellendus iure nemo! Similique ratione voluptatem quisquam culpa facere quo voluptate placeat sint! Lorem ipsum dolor sit amet consectetur adipisicing elit.
		Voluptate illo voluptatum at numquam architecto inventore exercitationem rerum repellendus iure nemo! Similique ratione voluptatem quisquam culpa facere quo voluptate
		placeat sint! Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate illo voluptatum at numquam architecto inventore exercitationem rerum repellendus iure nemo!
		Similique ratione voluptatem quisquam culpa facere quo voluptate placeat sint! Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate illo voluptatum at numquam
		architecto inventore exercitationem rerum repellendus iure nemo! Similique ratione voluptatem quisquam culpa facere quo voluptate placeat sint!
	</view>
</template>

<style lang="scss">
.container {
	height: 3000rpx;
}
.to-top {
	width: 100rpx;
	height: 100rpx;
	background-color: skyblue;
	position: fixed;
	bottom: 100rpx;
	right: 50rpx;
}
</style>
